<template>
  <div>
    <v-centerForm>
      <template slot='left'>
        <el-form inline :model="searchForm" ref="searchForm" label-width="80px">
          <el-form-item label="操作类型"
                        prop="ty">
            <el-select style="width: 100%" v-model="searchForm.ty">
              <el-option v-for="item in dataArr" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作员"
                        prop="uName">
            <el-input placeholder="请输入操作员姓名" v-model="searchForm.uName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh-left" @click="_=>this.$refs.searchForm.resetFields()">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot='right'>
        <el-button :loading="loadingBtn.tableLoading" type="primary" icon="el-icon-refresh-left" @click="getTableData">
          刷新
        </el-button>
      </template>
    </v-centerForm>
    <el-tabs v-model="tabName" @tab-click="getTableData">
      <el-tab-pane label="操作日志" name="operationLog">
        <v-tableEncapsulation :loading="loadingBtn.tableLoading" :columnData="operationLogColumnData"
                              :tableSize="pagination.size" :tableData="tableData" :tableTotal="pagination.total"
                              @currentPage="currentPage">
          <el-table-column slot="ty" label="操作类型"
                           align="center">
            <template slot-scope="scope">
              <div>{{ operationTypeFilter(scope.row.ty) }}</div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip @click="copyText(scope.row.res)" slot="res" label="返回数据"
                           align="center">
            <template slot-scope="scope">
              <div @click="copyText(scope.row.res)">{{ scope.row.res }}</div>
            </template>
          </el-table-column>
        </v-tableEncapsulation>
      </el-tab-pane>
      <el-tab-pane label="异常日志" name="exceptionLog">
        <v-tableEncapsulation :loading="loadingBtn.tableLoading" :columnData="exceptionLogColumnData"
                              :tableSize="pagination.size" :tableData="tableData" :tableTotal="pagination.total"
                              @currentPage="currentPage">
          <el-table-column show-overflow-tooltip slot="msg" label="异常信息" align="center">
            <template slot-scope="scope">
              <div @click="copyText(scope.row.msg)">{{ scope.row.msg }}</div>
            </template>
          </el-table-column>
        </v-tableEncapsulation>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { queryOperationLog, queryExceptionLog } from '@/api/system/operationLog'

export default {
  name: 'logManagement',

  data () {
    return {
      loadingBtn: {
        tableLoading: false
      },
      searchForm: {
        ty: null,
        uName: null
      },
      dataArr: [
        {
          id: 'LOGIN',
          label: '登录'
        },
        {
          id: 'LOGOUT',
          label: '注销'
        },
        {
          id: 'SELECT',
          label: '查询'
        },
        {
          id: 'INSERT',
          label: '新增'
        },
        {
          id: 'UPDATE',
          label: '更新'
        },
        {
          id: 'DELETE',
          label: '删除'
        },
        {
          id: 'UPLOAD',
          label: '上传'
        },
        {
          id: 'DOWNLOAD',
          label: '下载'
        },
        {
          id: 'IMPORT',
          label: '导入'
        },
        {
          id: 'EXPORT',
          label: '导出'
        },
      ],
      tabName: 'operationLog',
      operationLogColumnData: [
        {
          type: 'index',
          label: '序号'
        }, {
          label: '操作模块',
          prop: 'mod'
        }, {
          label: '操作类型',
          slot: 'ty'
        }, {
          label: '描述',
          prop: 'description'
        }, {
          label: '操作员',
          prop: 'uName'
        }, {
          label: '返回数据',
          slot: 'res'
        }, {
          label: '请求URI',
          prop: 'link'
        }, {
          label: '请求IP',
          prop: 'addr'
        }, {
          label: '操作时间',
          prop: 'createTime'
        }, {
          slot: 'operate',
          label: '操作'
        }
      ],
      exceptionLogColumnData: [
        {
          type: 'index',
          label: '序号'
        }, {
          label: '异常名称',
          prop: 'appellation'
        }, {
          label: '异常信息',
          slot: 'msg'
        }, {
          label: '操作员',
          prop: 'uName'
        }, {
          label: '请求URI',
          prop: 'link'
        }, {
          label: '请求IP',
          prop: 'addr'
        }, {
          label: '操作时间',
          prop: 'createTime'
        }, {
          slot: 'operate',
          label: '操作'
        }
      ],
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        params: {}
      },
      // 表单标签宽度
      formLabelWidth: '100px'
    }
  },
  computed: {
    operationTypeFilter () {
      return (value) => {
        if (!value) return
        return this.dataArr.find(item => item.id === value).label
      }
    }
  },
  methods: {
    search () {
      this.pagination.type = this.searchForm.ty
      this.pagination.userName = this.searchForm.uName
      this.getTableData()
    },
    copyText (text) {
      this.$copyText(text).then((e) => {
        this.$message.success('内容已复制到剪贴板！')
      })
    },
    /**
     * 表格数据初始化
     */
    async getTableData () {
      this.loadingBtn.tableLoading = true
      this.tableData = []
      let res
      switch (this.tabName) {
        case 'operationLog':
          res = await queryOperationLog(this.pagination)
          break
        case 'exceptionLog':
          res = await queryExceptionLog(this.pagination)
          break
      }
      const {
        data,
        code
      } = res
      if (code === this.$constant.SUCCESS) {
        this.tableData = data.records
        this.pagination.total = data.total
      }
      this.loadingBtn.tableLoading = false
    },
    /**
     * 切换页码
     * @param value
     */
    currentPage (value) {
      this.pagination.current = value
      this.getTableData()
    }
  },
  created () {
    this.getTableData()
  }
}
</script>

<style scoped>
</style>
